<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-value="{scope}">
				<control-value :data="scope.row"></control-value>
			</template>
			<template #table-column-status="{scope}">
				<span v-if="scope.row.status == 1" style="color:#22DE48">启用</span>
				<span v-if="scope.row.status == 0" style="color:#A2A4BA">关闭</span>
			</template>
			<template #table-column-firstCashBack="{scope}">
				<span v-if="scope.row.firstCashBack == 1" style="color:#22DE48">是</span>
				<span v-if="scope.row.firstCashBack == 0" style="color:#A2A4BA">否</span>
			</template>
			<template #table-column-app="{scope}">
				{{ filterplatForm(scope.row.app) }}
			</template>
			<template #slot-delete="scope">
				<del-btn @del="crud.delete(scope.row)"></del-btn>
			</template>
			<template #slot-select-app>
				<div class="appNav">
					<span class="t">数据平台</span>
					<el-select
						class="select"
						size="small"
						@change="filterChange"
						v-model="appvalue"
						placeholder="请选择"
					>
						<el-option label="全部" value=""> </el-option>
						<el-option
							v-for="item in platformList"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import delBtn from '@/components/common/del-btn';
import controlValue from './components/control-value';
import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			crud: null,
			options: [],
			appvalue: ''
		};
	},
	components: { delBtn, controlValue },
	computed: {
		...mapGetters(['platformList']),
		filterplatForm() {
			return function(val) {
				return this.platformList.length == 0
					? val
					: this.platformList.filter(v => v.value == val)[0].label;
			};
		}
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.systemMenagement.risk)
				.permission({
					update: true,
					delete: true,
					add: true
				})
				.set('dict', {
					label: {
						add: '添加风控设置'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'selection',
							align: 'center',
							width: 60
						},
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 80
						},
						{
							label: '数据平台',
							prop: 'app',
							align: 'center'
						},
						{
							label: '风控内容',
							prop: 'value',
							align: 'center',
							width: 350
						},
						{
							label: '首单可提佣金',
							prop: 'firstOrderCommission',
							align: 'center'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '首单立即提现',
							prop: 'firstCashBack',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						},
						{
							label: '修改时间',
							prop: 'updateTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						}
					],

					op: {
						layout: ['edit', 'slot-delete']
					}
				})
				.set('upsert', {
					props: {
						width: '700px',
						labelWidth: '100px',
						title: '风控设置'
					},
					items: [
						{
							label: '数据平台',
							prop: 'app',
							span: 12,
							component: {
								name: 'el-select',
								props: {
									filterable: true,
									'default-first-option': true,
									clearable: true
								},
								options: []
							},
							rules: {
								required: true,
								message: '数据平台'
							}
						},
						{
							props: {
								labelWidth: '80px'
							},
							component: {
								name: 'base-info',
								render() {
									return (
										<p style="color:#999999;margin-bottom:-10px">
											时间内佣金：（下单时间）
										</p>
									);
								}
							}
						},
						{
							props: {
								labelWidth: '200px'
							},
							prop: 'orderCommission',
							label: '单笔佣金(元)',
							value: 50,
							span: 13,
							component: {
								name: 'el-input-number',
								attrs: {
									'controls-position': 'right'
								},
								props: {
									min: 0
								}
							}
						},
						{
							props: {
								labelWidth: '200px'
							},
							prop: 'firstOrderCommission',
							label: '首单佣金可提现(元)',
							value: 0,
							span: 13,
							component: {
								name: 'el-input-number',
								attrs: {
									'controls-position': 'right'
								},
								props: {
									min: 0
								}
							}
						},
						{
							props: {
								labelWidth: '200px'
							},
							prop: 'orderCommissionOneHour',
							value: 200,
							label: '（1）近1小时佣金(元)',
							span: 13,
							component: {
								name: 'el-input-number',
								attrs: {
									'controls-position': 'right'
								},
								props: {
									min: 0
								}
							}
						},
						{
							props: {
								labelWidth: '200px'
							},
							prop: 'orderCommissionThreeHour',
							value: 500,
							label: '（2）近3小时佣金(元)',
							span: 13,
							component: {
								name: 'el-input-number',
								attrs: {
									'controls-position': 'right'
								},
								props: {
									min: 0
								}
							}
						},
						{
							props: {
								labelWidth: '200px'
							},
							prop: 'orderCommissionOneDay',
							label: '（3）近1天佣金(元)',
							value: 1000,
							span: 13,
							component: {
								name: 'el-input-number',
								attrs: {
									'controls-position': 'right'
								},
								props: {
									min: 0
								}
							}
						},
						{
							props: {
								labelWidth: '200px'
							},
							prop: 'orderCommissionThreeDay',
							label: '（4）近3天佣金(元)',
							value: 2000,
							span: 13,
							component: {
								name: 'el-input-number',
								attrs: {
									'controls-position': 'right'
								},
								props: {
									min: 0
								}
							}
						},
						{
							props: {
								labelWidth: '200px'
							},
							prop: 'orderCommissionOneMonth',
							label: '（5）近1个月佣金(元)',
							value: 5000,
							span: 13,
							component: {
								name: 'el-input-number',
								attrs: {
									'controls-position': 'right'
								},
								props: {
									min: 0
								}
							}
						},
						{
							props: {
								labelWidth: '80px'
							},
							prop: 'settleDaysMin',
							value: 15,
							component: {
								name: 'orderMin-risk',
								data() {
									return {
										value2: this.value
									};
								},
								props: {
									value: [Number]
								},
								watch: {
									value(val) {
										this.value2 = val;
									}
								},
								methods: {
									changeRisk(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<div>
											<div class="risk-title">
												确认收货后需
												<el-input-number
													v-model={this.value2}
													controls-position="right"
													min={0}
													size="mini"
													on-change={this.changeRisk}></el-input-number>
												天之后结算到可提现余额
											</div>
										</div>
									);
								}
							}
						},
						{
							props: {
								labelWidth: '80px'
							},
							prop: 'settleDaysMax',
							value: 0,
							component: {
								name: 'orderMax-risk',
								data() {
									return {
										value2: this.value
									};
								},
								props: {
									value: [Number]
								},
								watch: {
									value(val) {
										this.value2 = val;
									}
								},
								methods: {
									changeRisk(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<div>
											<div class="risk-title">
												风控订单不允许直接入账，需
												<el-input-number
													v-model={this.value2}
													controls-position="right"
													min={0}
													size="mini"
													on-change={this.changeRisk}></el-input-number>
												天之后结算到可提现余额
											</div>
										</div>
									);
								}
							}
						},
						{
							props: {
								labelWidth: '140px'
							},
							label: '首单立即提现',
							prop: 'firstCashBack',
							component: {
								name: 'el-switch'
							}
						},
						{
							props: {
								labelWidth: '140px'
							},
							label: '启动状态',
							prop: 'status',
							component: {
								name: 'el-switch'
							}
						}
					]
				})
				.on('open', async (isEdit, data) => {
					this.crud.setData(
						'upsert.items[prop:app].component.options',
						this.$store.state.topFilter.platList
					);
					if (isEdit) {
						this.crud.setForm('status', data.status == 1 ? true : false);
						this.crud.setForm('firstCashBack', data.firstCashBack == 1 ? true : false);
					}
				})
				.on('submit', async (isEdit, data, { next }) => {
					if (isEdit) {
						let status = data.status ? '1' : '0';
						delete data.createTime;
						delete data.firstOrderCommission;
						delete data.updateTime;
						delete data.orderNum;
						delete data.refundOrderNumAll;
						delete data.refundOrderNumWeek;
						next({
							...data,
							status
						});
					} else {
						let status = data.status ? '1' : '0';
						next({
							...data,
							status
						});
					}
				})
				.set('layout', [
					[
						'refresh-btn',
						'add-btn',
						'multi-delete-btn',
						'query',
						'flex1',
						'slot-select-app',
						'search-key'
					],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh({});
		},
		filterChange(e) {
			this.crud.refresh({
				app: e
			});
		}
	}
};
</script>

<style lang="scss">
.commission-range-tit {
	padding: 0 10px;
	color: $text-grey;
	span {
		color: #333333;
	}
}
.time-li {
	margin: 19px 0;
	.time-li-title {
		width: 130px;
		margin-right: 10px;
	}
}
.risk-title {
	.el-input-number--mini {
		width: 70px;
		.el-input__inner {
			padding-right: 30px;
		}
	}
}
.appNav {
	margin-right: 20px;
	font-size: $font14;
	.t {
		margin-right: 10px;
	}
}
</style>
